import { Popup, Step, Steps } from '@nutui/nutui-react-taro'
import '@nutui/nutui-react-taro/dist/style.css'
import { ScrollView, Text, View } from '@tarojs/components'
import Taro, { useRouter } from '@tarojs/taro'
import React, { useState } from 'react'
import Button from '../../components/button'
import Card from '../../components/card'
import Layout from '../../components/layout'
import OrderDetail from '../../components/order-detail'
import SupervisorCard from '../../components/supervisor-card'
import './index.less'

interface OrderItem {
  id: string
  name: string
  description: string
  price: string
  quantity: string
  image: string
}

const OrderDetails: React.FC = () => {
  const router = useRouter()
  const { id } = router.params
  const [showContractModal, setShowContractModal] = useState(false)

  // 使用订单ID进行相关操作
  console.log('订单ID:', id)

  const handleCallSupervisor = (): void => {
    // 处理联系监督员逻辑
    console.log('联系监督员')
  }

  const handlePackageClick = (packageId: string): void => {
    // 跳转到套餐详情页
    console.log('跳转到套餐详情:', packageId)
  }

  const handleSignContract = (): void => {
    setShowContractModal(true)
  }

  const handleCloseContractModal = (): void => {
    setShowContractModal(false)
  }

  const handleContractSigned = (): void => {
    setShowContractModal(false)
    // 可以在这里添加合同签署成功后的逻辑
    console.log('合同签署成功')
  }

  const orderItems: OrderItem[] = [
    {
      id: '1',
      name: '全屋整装套餐',
      description: '包含全屋设计、施工、基材、主材、家具家电等',
      price: '¥128,800',
      quantity: 'x1',
      image: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=400&h=300&fit=crop&crop=center',
    },
    {
      id: '2',
      name: '卫生间整装套餐',
      description: '包含卫生间设计、施工、基材、主材等',
      price: '¥15,800',
      quantity: 'x1',
      image: 'https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop&crop=center',
    },
  ]

  // 订单状态步骤数据
  const orderSteps = [
    { title: '预约量房' },
    { title: '设计中' },
    { title: '待签约' },
    { title: '施工中' },
    { title: '待验收' },
    { title: '验收完成' },
    { title: '已结单' },
  ]

  // 当前步骤索引（从0开始）
  const currentStep = 2 // 当前在"待签约"步骤

  const totalAmount = 144600

  // 检查当前状态是否为'待签约'
  const isWaitingForContract = currentStep === 2

  const handleProductClick = (productId: string): void => {
    console.log('跳转到产品详情:', productId)
    Taro.navigateTo({
      url: `/pages/product-details/index?id=${productId}`,
    })
  }

  return (
    <Layout title='订单详情' showTabBar={false}>
      <ScrollView className='order-details-container' scrollY>
        {/* 现场监督信息 */}
        <SupervisorCard
          name='张工'
          phone='138-XXXX-XXXX'
          avatar='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face'
          onCall={handleCallSupervisor}
        />

        {/* 订单内容 */}
        <Card className='order-items-card'>
          <View className='order-items-header'>
            <Text className='order-items-title'>订单内容</Text>
          </View>
          <OrderDetail orderItems={orderItems} totalAmount={totalAmount} onProductClick={handleProductClick} />
        </Card>

        {/* 订单状态 */}
        <Card className='order-status-card'>
          <View className='order-status-header'>
            <Text className='order-status-title'>订单状态</Text>
          </View>
          <View className='order-status-steps'>
            <Steps direction='vertical' value={2}>
              {orderSteps.map((step, index) => (
                <Step key={index} value={index} title={step.title} />
              ))}
            </Steps>
          </View>
        </Card>

        {/* 底部签约按钮 */}
        {isWaitingForContract && (
          <View className='contract-footer'>
            <Button className='contract-button' onClick={handleSignContract}>
              立即签约
            </Button>
          </View>
        )}
      </ScrollView>

      {/* 合同签署弹框 */}
      <Popup
        visible={showContractModal}
        onClose={handleCloseContractModal}
        position='bottom'
        className='contract-modal'>
        <View className='contract-content'>
          <Text className='contract-description'>请您仔细阅读合同内容，确认无误后签署。</Text>

          <View className='contract-details'>
            <Text className='contract-section-title'>电子合同</Text>

            {/* 合同双方 */}
            <View className='contract-parties'>
              <Text className='contract-party'>甲方：张三</Text>
              <Text className='contract-party'>乙方：袋鼠焕新家</Text>
            </View>

            {/* 项目详情 */}
            <View className='project-details'>
              <Text className='project-detail'>工程地址：北京市海淀区中关村</Text>
              <Text className='project-detail'>工程项目：老房翻新</Text>
              <Text className='project-detail'>工程总金额：¥{totalAmount.toLocaleString()}</Text>
              <Text className='project-detail'>工程工期：30天</Text>
              <Text className='project-detail'>付款方式：分期付款</Text>
            </View>

            {/* 合同条款 */}
            <View className='contract-terms'>
              <Text className='terms-title'>合同条款：</Text>
              <Text className='term-text'>
                1. 设计与施工：乙方将根据甲方确认的设计方案进行施工。任何设计变更需双方书面确认。
              </Text>
              <Text className='term-text'>
                2. 材料供应：所有装修材料均由乙方提供，品牌和规格需符合合同附件中的规定。
              </Text>
              <Text className='term-text'>
                3. 工程验收：工程分为中期和末期两次验收。每次验收需双方代表在场，并在验收单上签字确认。
              </Text>
              <Text className='term-text'>
                4. 保修服务：工程竣工后，乙方提供为期两年的保修服务，覆盖所有非人为损坏的施工项目。
              </Text>
              <Text className='term-text'>5. 违约责任：任何一方未能履行合同义务，应承担相应的违约责任。</Text>
              <Text className='term-text'>
                6. 争议解决：合同履行过程中发生争议，双方应友好协商解决；协商不成的，可向项目所在地人民法院提起诉讼。
              </Text>
              <Text className='term-text'>7. 其他：本合同一式两份，甲乙双方各执一份，具有同等法律效力。</Text>
            </View>
          </View>
        </View>

        <View className='contract-actions'>
          <Button onClick={handleContractSigned} className='sign-button'>
            签署
          </Button>
        </View>
      </Popup>
    </Layout>
  )
}

export default OrderDetails
